<template>
    <el-form-item label-width="0">
        <el-divider class="custom-divider-margin-top">底部按钮配置</el-divider>
        <draggable tag="ul" :list="optionModels.footerButton" class="dUl"
                   v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
            <li v-for="(option, idx) in optionModels.footerButton" :key="idx">
                <div class="line-icon drag-option"><i style="line-height: 32px" class="el-icon-rank"></i></div>

                <div class="line-con">
                    <div>
                        <span>按钮名称：</span>
                        <el-input size="mini" v-model="option.name"></el-input>
                    </div>
                    <div>
                        <span>按钮样式：</span>
                        <el-select v-model="option.type" size="mini">
                            <el-option label="default" value="default"></el-option>
                            <el-option label="primary" value="primary"></el-option>
                            <el-option label="success" value="success"></el-option>
                            <el-option label="info" value="info"></el-option>
                            <el-option label="warning" value="warning"></el-option>
                            <el-option label="danger" value="danger"></el-option>
                        </el-select>
                    </div>
                    <div>
                        <span>按钮大小：</span>
                        <el-select v-model="option.size" size="mini">
                            <el-option label="default" value="default"></el-option>
                            <el-option label="medium" value="medium"></el-option>
                            <el-option label="small" value="small"></el-option>
                            <el-option label="mini" value="mini"></el-option>
                        </el-select>
                    </div>
                    <div>
                        <span>绑定事件：</span>
                        <el-select v-model="option.onClick" size="mini" clearable>
                            <template v-for="item in methodsList">
                                <el-option :label="item.name" :value="item.name"></el-option>
                            </template>
                        </el-select>
                    </div>
                </div>

                <div class="line-icon">
                    <el-button style="font-size: 16px" type="text" icon="el-icon-delete"
                               @click="deleteBtn(idx)"></el-button>
                </div>
            </li>
        </draggable>
        <el-button type="text" @click="addBtn">新增一项</el-button>
    </el-form-item>
</template>

<script>
import SelectModelData from "@/components/form-designer/config-common/select-model-data/select-model-data.vue";
import SvgIcon from "@/components/svg-icon/index.vue";
import i18n from "@/utils/i18n";
import Draggable from 'vuedraggable'

export default {
    name: "footerButton-editor",
    components: {Draggable, SelectModelData, SvgIcon},
    mixins: [i18n],
    props: {
        designer: Object,
        selectedWidget: Object,
        optionModel: Object,
    },
    computed: {
        optionModels() {
            return this.selectedWidget.options
        },
        methodsList() {
            let list = [];
            let {pageScript: {methods}} = this.designer;
            if (methods && methods.length > 0) {
                methods.forEach(i => {
                    list.push({name: i.funName, value: i.funBody});
                })
            }
            return list;
        }
    },
    data() {
        return {}
    },
    methods: {
        deleteBtn(index) {
            this.optionModels.footerButton.splice(index, 1)
        },
        addBtn() {
            this.optionModels.footerButton.push({
                size: "small",
                type: "",
                name: "按钮" + (this.optionModels.footerButton.length + 1),
                onClick: ""
            })
        }
    }
}
</script>

<style scoped lang="scss">
.dUl {
  padding-left: 0;
  list-style: none;

  > li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    border: 1px solid #f2f2f2;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 5px;

    .line-con {
      width: calc(100% - 60px);

      > div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-top: 5px;

        > span {
          display: inline-block;
          width: 90px;
          font-size: 12px;
        }

        .el-select {
          width: 100%;
        }
      }
    }

    .line-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
